<template>
  <view class="js-paymentMethod">
    <u-popup
      v-model="visibleSync"
      closeable
      width="100%"
      mode="bottom"
      close-icon="close-circle"
      close-icon-color="#ffffff"
      close-icon-size="42"
      border-radius="30"
      @open="openPopup"
      @close="closePopup"
    >
      <view class="pay-wrap">
        <view class="pay-wrap-content">
          <view class="pay-money"><text>¥</text>{{ price }}</view>
          <view class="pay-way">
            <view class="pay-way-title">付款方式</view>
            <radio-group>
              <!-- <view class="pay-way-item">
                <view class="left">
                  <image
                    src="/static/images/pay-ye.png"
                    mode="widthFix"
                  ></image>
                  <view class="info">
                    <view class="info_title">余额支付</view>
                    <view class="info_subTitle">(钱包余额:{{walletBalance || 0}}元)<text
                        class="czBtn"
                        @click="handleRecharge"
                      >充值</text></view>
                  </view>
                </view>
                <radio
                  value="0"
                  :checked="payType == '0'"
                  color="#4A9456"
                  @click="radioChange('0')"
                />
              </view> -->

              <!--              <view class="pay-way-item">
                <view class="left">
                  <image
                    src="/static/images/pay-yl.png"
                    mode="widthFix"
                  ></image>
                  <view class="info">
                    <text class="info_title">银联支付</text>
                  </view>
                </view>
                <radio
                  value="3"
                  :checked="payType == '3'"
                  color="#4A9456"
                  @click="radioChange('3')"
                />
              </view> -->

              <!-- <view class="pay-way-item">
                <view class="left">
                  <image
                    src="/static/images/pay-wx.png"
                    mode="widthFix"
                  ></image>
                  <view class="info">
                    <text class="info_title">微信支付</text>
                  </view>
                </view>
                <radio
                  value="1"
                  :checked="payType == '1'"
                  color="#4A9456"
                  @click="radioChange('1')"
                />
              </view> -->

              <view class="pay-way-item">
                <view class="left">
                  <image
                    src="/static/images/pay-zfb.png"
                    mode="widthFix"
                  ></image>
                  <view class="info">
                    <text class="info_title">支付宝支付</text>
                  </view>
                </view>
                <radio
                  value="2"
                  :checked="payType == '2'"
                  color="#4A9456"
                  @click="radioChange('2')"
                />
              </view>
            </radio-group>
          </view>
        </view>
        <view class="pay-btn" @click="handleSure">{{ btnText }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import service from '@/common/service.js';
import {
  showLoading,
  keepTwoDecimalFull,
  hideLoading,
  throttle,
} from '@/common/utils';

export default {
  props: {
    show: { type: Boolean, default: false },
    btnText: { type: String, default: '立即付款' },
    price: { type: [Number, String], default: 0 },
  },
  data() {
    return {
      visibleSync: false,
      totalPrice: 0,
      isWeixin: false,
      payType: '2',
      walletBalance: 0,
    };
  },
  watch: {
    show: {
      handler(newVal, oldVal) {
        this.visibleSync = newVal;
      },
      immediate: true,
    },
    price: {
      handler(newVal, oldVal) {
        this.totalPrice = newVal;
      },
      immediate: true,
    },
    isWeixin: {
      handler(newVal, oldVal) {
        var ua = navigator.userAgent.toLowerCase();
        this.isWeixin = ua.indexOf('micromessenger') != -1;
      },
      immediate: true,
    },
  },
  methods: {
    openPopup() {
      this.getMemberAssets();
    },
    getMemberAssets() {
      const that = this;
      showLoading();
      service.getMemberAssets(
        {},
        function (res) {
          if (res && res.data) {
            const { data } = res;
            that.walletBalance = `${keepTwoDecimalFull(data)}`;
          }
          hideLoading();
        },
        function () {
          hideLoading();
        }
      );
    },
    showPopup() {
      this.visibleSync = true;
    },
    closePopup() {
      this.visibleSync = false;
      this.$emit('update:show', false);
    },
    handleRecharge() {
      uni.navigateTo({
        url: '/pages/myWallet/recharge',
      });
    },
    radioChange(payType) {
      this.payType = payType;
      this.$emit('payChange', payType);
    },
    handleSure: throttle(function () {
      this.closePopup();
      this.$emit('sure', this.payType);
    }, 1000),
  },
};
</script>

<style lang="scss" scoped>
.js-operationPswInput {
  width: 100%;
}

.pay-wrap {
  width: 100%;
  padding: 70rpx 30rpx;
  background: #fff;

  .pay-wrap-content {
    width: 100%;

    .pay-money {
      width: 100%;
      padding: 0 0 25rpx;
      font-size: 72rpx;
      font-weight: bold;
      color: #222222;
      line-height: 1;
      text-align: center;
      border-bottom: 1rpx solid #e6e6e6;

      text {
        font-size: 48rpx;
        font-weight: bold;
        color: #222222;
        line-height: 1;
      }
    }

    .pay-way {
      margin-top: 50rpx;
      width: 100%;

      .pay-way-title {
        margin-bottom: 30rpx;
        width: 100%;
        font-size: 26rpx;
        font-weight: normal;
        color: #222222;
        line-height: 1;
        text-align: left;
      }

      .pay-way-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 20rpx 0;

        .left {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          image {
            width: 48rpx;
            height: auto;
          }

          .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            margin-left: 30rpx;

            .info_title {
              font-size: 26rpx;
              font-weight: normal;
              color: #222222;
              line-height: 1;
            }

            .info_subTitle {
              margin-top: 5rpx;
              font-size: 18rpx;
              font-weight: normal;
              color: #999999;
              line-height: 1;
              .czBtn {
                margin-left: 10rpx;
                color: #2c76de;
              }
            }
          }
        }
      }
    }
  }

  .pay-btn {
    margin-top: 40rpx;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    background: linear-gradient(90deg, #22242e, #434759);
    border-radius: 10rpx;
  }
}
</style>
